<template>
    <div class="step-group">
        <el-steps :active="active">
            <el-step title="申请" icon="el-icon-edit" ></el-step>
            <el-step title="初审" icon="el-icon-upload" ></el-step>
            <el-step title="审核" icon="el-icon-edit" class="transform-deg"></el-step>
            <el-step title="" icon="el-icon-edit" class="transform-deg_line"></el-step>
            <el-step title="赋码反馈(一般类、备案类)" icon="el-icon-upload" class="step-record"></el-step>
            <el-step title="清单报批" icon="el-icon-upload" class="step-list-report"></el-step>
            <el-step title="政府批复" icon="el-icon-picture" class="step-approval"></el-step>
            <el-step title="赋码反馈" icon="el-icon-upload" class="step-coding"></el-step>
        </el-steps>
    </div>
</template>

<script>
    export default {
        name: "processViewSimplePlanningRegister",
        props:{
            active: {
                type: Number,
                required: true
            }
        }
    }
</script>

<style lang="scss" scoped>

    /*流程图样式*/
    .step-group {
        padding: 60px 10px 10px;
        height: 120px;
        .transform-deg{
            .el-step__line {
                transform: rotate(-14deg);
                margin-top: -17px;
            }
        }
        .transform-deg_line {
            margin-left: -145px;
            .el-step__line{
                transform: rotate(16deg);
                margin-top: 17px;
            }
        }
        /deep/.step-record{
            margin-top: -50px;
            margin-left: 24px;
            .el-step__title{
                width: 200px;
            }
            .el-step__line{
                display: none;
            }
        }
        .step-list-report{
            margin-top: 35px;
            margin-left: -200px;
        }
        .step-approval{
            margin-top: 35px;
        }
        .step-coding{
            margin-top: 35px;
        }
    }
</style>